/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

//时间控件，官网：https://github.com/weifeiyue/vue-datepicker-local
import VueDatepickerLocal from 'vue-datepicker-local'

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        searchParams:{
            keyword:'',
            openid:'',
            unionid:'',
            outer_str: '',
            has_active: '',
            card_base_id:0,
            level_id:0,
            start_time:'',
            end_time:'',
        },
        box:null,
        curMemberListData:null,
        member_card:page_params.data_member_card,
        member_level:[],
        start_time:'',
        end_time:'',
    },
    watch:{
        searchParams:{
            handler: function (val) {
                let cardBaseId = val.card_base_id;
                if (cardBaseId && page_params.data_member_level_group[cardBaseId]){
                    this.member_level = page_params.data_member_level_group[cardBaseId];
                }else{
                    this.member_level = [];
                }
            },
            deep: true
        },
        start_time:function (val) {
            if (val){
                var d = new Date(val);
                let format = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                this.searchParams.start_time = format;
            } else{
                this.searchParams.start_time = '';
            }
        },
        end_time:function (val) {
            if (val){
                var d = new Date(val);
                let format = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                this.searchParams.end_time = format;
            } else{
                this.searchParams.end_time = '';
            }
        }
    },
    mounted:function(){
        let tableOptions = utils.bootstraptableOptions;
        //请求后台的URL
        tableOptions.url = page_params.url_list;
        //搜索参数
        tableOptions.queryParams = (params) => {//传递参数（*）
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize:params.pageSize,
                page:params.pageNumber,
            };
            return _.merge(temp, this.searchParams);
        };
        tableOptions.columns = [
            {field: 'id'},
            {field: 'card_id',title: '卡券ID',visible:false,},
            {field: 'user_card_code',title: '卡券Code码',visible:false,},
            {field: 'card.title',title: '会员卡名称',visible:false,},
            {field: 'openid',title: 'openId',},
            {field: 'user.unionid',title: 'unionId',},
            {field: 'nickname',title: '用户昵称',},
            {
                field: 'user.headimgurl',title: '头像',
                formatter:function (value, row, index) {
                    if (value){
                        return '<img alt="image" class="img-circle img-sm" src="' + value + '">';
                    }
                }
            },
            {field: 'receive.outer_str',title: '来源标识'},
            {field: 'user_info.mobile',title: '手机号'},
            {field: 'level_name',title: '会员等级'},
            {field: 'bonus',title: '积分'},
            {field: 'user_card_status_str',title: '会员卡状态',visible:false,},
            {
                field: 'has_active',title: '是否被激活',
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">已激活</span>';
                    }else{
                        return '<span class="label label-warning">未激活</span>';
                    }
                }
            },
            {field: 'created_at',title: '领卡时间'},
            {
                field: 'operate',
                title: '操作',
                formatter: (value, row, index) => {
                    let buttons = [];
                    //查看详细
                    buttons.push('<button class="btn btn-primary btn-sm btn-detail"><i class="fa fa-eye"></i> 查看详细</button>');

                    return buttons.join("\r\n");
                },//自定义方法，添加操作按钮
                events : {
                    'click .btn-detail' : (e, value, row, index) => {
                        this.curMemberListData = row;
                        this.box = layer.open({
                            type: 1,
                            title: '会员详细',
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            skin: 'layui-layer-molv', //加上边框
                            area: ['600px', '600px'], //宽高
                            content: $('#box-detail')
                        });
                    },
                }
            },
        ];
        this.table = $("#table").bootstrapTable(tableOptions);
    },
    methods: {
        exportList: function() {
            location.href = page_params.url_export + '?' + utils.urlEncode(this.searchParams);
        },
        query: function () {
            //不更新params会导致页码不重置为1
            this.table.bootstrapTable('refresh', {pageNumber: 1});
        },
        close:function () {
            layer.close(this.box);
        }
    },
    components: {
        VueDatepickerLocal
    },
});